Implemented the login screen based on Katy's Figma design. [src/app/screens/loginScreen]

Description

Created Login Page:

newly created components:

-"src/app/components/InputFields.tsx" is meant for the input field where the user would be able to type in their email + password. Takes in two arguments within the props: text and placeholder. Text is used for the Header of the input field, while the placeholder is the argument used within the input component. For example, the text can be a password, and the placeholder can be *******.

• "src/app/components/LoginForm.tsx" is meant to combine the input fields of Email address and password into one div. Renders the InputFields component.

changes to src/app/screens/loginScreen:

• page.tsx is where the entirety of the login screen is rendered. Used LoginForm component. Calls , which applies a style to the whole page. LoginBox is the box with the border, while LoginContent is the div to keep everything together, such as the welcome sign, login form, and button.
• styles.ts is where the styled-components are defined.
• shantiLogo.png was added

Screenshots

How to review

Open the webpage and navigate to http://localhost:3000/screens/loginScreen to view the implementation.

Order to review files: InputFields -> LoginForm.tsx ->page.tsx(within loginScreen)->styles.ts.

Notes: the image is not working at the moment. I attempted to render it as a component, but it did not work.

Next steps

• getting to fix the image. right now the yellow box represents where the image would go.

Relevant Links

Online sources

https://www.figma.com/file/uEJp29FD9wTYN48ESD2Mkb/Shanti-Project?type=design&node-id=14-19&mode=design&t=ZqgCmOnkXSmgUAVE-0

Related PRs

🛍 CC: @EthanAuyeung